import { useState } from 'react';
import { MedicineBoxOutlined, HeartFilled ,UserOutlined} from "@ant-design/icons";
import { Button } from '~/components/ui/button';
import type { FC } from "react";
import { useStore, authActions } from "~/core/store"

interface AppHeaderProps {
  onLoginClick: () => void;  // 明确指定函数类型
}

export const AppHeader: FC<AppHeaderProps> = ({ onLoginClick }) => {
  const [dialogVisible, setDialogVisible] = useState(false);
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [username, setUsername] = useState('');
  const { auth } = useStore();

  const handleLoginSuccess = (username: string) => {
    setIsLoggedIn(true);
    setUsername(username);
    localStorage.setItem('access_token', 'your_jwt_token_here'); // 实际应从登录响应获取
  };

  // 退出登录处理
  const handleLogout = () => {
    setIsLoggedIn(false);
    setUsername('');
    localStorage.removeItem('access_token');
  };

  return (
    <div className="flex items-center w-full justify-between">
      {/* 左侧Logo部分 */}
      <a
        className="flex items-center font-medium text-xl text-primary transition-colors hover:text-primary/80 group"
        href="https://github.com/SDU-Gary/DeepMedical"
        target="_blank"
      >
        <MedicineBoxOutlined className="mr-2 text-xl group-hover:animate-pulse" />
        <span className="font-serif">DeepMedical</span>
        <HeartFilled className="ml-1.5 text-sm text-primary/70" />
      </a>

      <div className="flex items-center gap-4">
        {/* 原有标语 */}
        <div className="text-sm text-muted-foreground px-3 py-1 bg-secondary/30 rounded-full">
          医智寻源 · 专业医疗知识检索引擎
        </div>

        <div className="flex items-center gap-4">
      {auth.isLoggedIn ? (
        <div className="flex items-center gap-2">
          <UserOutlined className="text-primary" />
          <span className="text-sm text-foreground">{auth.username}</span>
          <Button 
            onClick={authActions.logout}
            className="text-red-500 hover:bg-red-50"
          >
            退出
          </Button>
        </div>
      ) : (
        <Button 
          onClick={onLoginClick}
          className="text-sm bg-primary/90 hover:bg-primary"
        >
          登录
        </Button>
      )}
    </div>
      </div>

      
    </div>
  );
}